<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="js/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="css/base.css">
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        /*el-tabs__content是解析后的html节点*/
        .el-tabs__content{
            height: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="100px" class="bgi-h">
            <el-row class="h100" type="flex" justify="center" align="middle">
                <el-col :span="6" class="h100 tac">
                    <!--<img src="img/login.png" class="h100">-->
                </el-col>
                <el-col :span="12" class="fs30 tac">XXX管理系统</el-col>
                <!--<el-col :span="6"  class="tar">欢迎您 , {{userInfo.username}}</el-col>-->
                <el-col :span="6" class="tar">
                    <el-dropdown  @command="logout">
                        <span class="el-dropdown-link">
                            欢迎您 , {{userInfo.username}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-col>
            </el-row>
        </el-header>
        <el-container id="container">
            <el-aside width="250px">
                <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    @select="handleSelect"
                    >
                    <!--只适用于二级菜单，要是还有子级菜单需要再往下循环-->
                    <div v-for="(item, index) in navData">
                        <el-submenu v-if="item.children !== undefined && item.children.length > 0" :index="item.id.toString()">
                            <template slot="title">
                            <i :class="item.icon"></i>
                            <span>{{item.name}}</span>
                            </template>
                            <div v-for="(children, index) in item.children">
                                <el-menu-item :index="children.id.toString()">{{children.name}}</el-menu-item>
                            </div>
                        </el-submenu>
                        <el-menu-item v-if="item.children !== undefined && item.children.length <= 0" :index="item.id.toString()">
                            <i :class="item.icon"></i>
                            <span slot="title">{{item.name}}</span>
                        </el-menu-item>
                    </div>
                </el-menu>
            </el-aside>
            <el-main style="overflow:hidden;">
                <!--打开页面的Tabs-->
                <el-tabs v-model="editableTabsValue" type="card" closable @edit="handleTabsEdit" style="height: 100%">
                    <el-tab-pane
                            :key="item.name"
                            v-for="(item, index) in editableTabs"
                            :label="item.title"
                            :name="item.name"
                            style="height:90%"
                    >
                        <iframe id="childPage" :src="item.url" width="100%" height="100%" frameborder="0" ></iframe>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>  
</div>
</body>
<script src="js/base.js"></script>
<script src="js/vue/vue.js"></script>
<script src="js/element-ui/index.js"></script>
<script src="js/jquery/jquery-3.3.1.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            //导航菜单
            navData: [],

            //tabs
            editableTabsValue: '0',//首次激活的标签,与name对应
            editableTabs: [{
                title: '主页',
                name: '0',
                url: '/home'
            }],
            tabIndex: 1,//在增加删除tab时，用于激活状态的tab
            userInfo: {}
        },
        methods: {
            appHeight: function () {
                var windowHeight = $(window).height();
                $('#app').css('height',windowHeight);
                $('#container').css('height',windowHeight - 100);
            },
            handleSelect: function(index){
                //先循环查找到选中的菜单信息，然后进行tabs增加操作
                var checkNav = this.checkOutNav(parseInt(index));
                this.tabsAdd(checkNav.name,checkNav.url);
            },
            checkOutNav:function(index){
            //从navData中找出选中的菜单信息
                for(var i = 0;i<this.navData.length;i++){
                    if(this.navData[i].children.length > 0){
                        var childrenArr = this.navData[i].children;
                        for(var j = 0;j<childrenArr.length;j++){
                            if(index === childrenArr[j].id){
                                return childrenArr[j];
                            }
                        }
                    }else{
                        if(index === this.navData[i].id){
                            return this.navData[i];
                        }
                    }
                }
            },
            tabsAdd: function(title,url){
                let newTabName = ++this.tabIndex + '';
                this.editableTabs.push({
                    title: title,
                    name: newTabName,
                    url: url
                });
                this.editableTabsValue = newTabName;
            },
            handleTabsEdit:function(targetName, action) {
                if (action === 'remove') {
                    let tabs = this.editableTabs;
                    let activeName = this.editableTabsValue;
                    if (activeName === targetName) {
                        tabs.forEach((tab, index) => {
                            if (tab.name === targetName) {
                                let nextTab = tabs[index + 1] || tabs[index - 1];
                                if (nextTab) {
                                    activeName = nextTab.name;
                                }
                            }
                        });
                    }
                    this.editableTabsValue = activeName;
                    this.editableTabs = tabs.filter(tab => tab.name !== targetName);
                }
            },
            getNavData:function(){
                var _this = this;
                $.ajax({
                    url: '/user/getNavPermissions',
                    data: {},
                    dataType: 'json',
                    type: 'get',
                    success: function (res) {
                        if(res.code == 0){
                            _this.navData = res.data;
                        }else{
                            _this.$message(res.msg);
                        }
                    },
                    error: function (res) {
                        console.log(res);
                    }
                });
            },
            getUserInfo:function () {
                var _this = this;
                $.ajax({
                    url: '/user/getUserInfo',
                    data: {},
                    dataType: 'json',
                    type: 'get',
                    success: function (res) {
                        if(res.code == 0){
                            _this.userInfo = res.data;
                        }else{
                            _this.$message(res.msg);
                        }
                    },
                    error: function (res) {
                        console.log(res);
                    }
                });
            },
            logout:function (command) {
                if(command == 'logout'){
                    $.ajax({
                        url: '/user/logout',
                        data: {},
                        dataType: 'json',
                        type: 'get',
                        success: function (res) {
                            if(res.code == 0){
                                window.location.reload();
                            }else{
                                _this.$message(res.msg);
                            }
                        },
                        error: function (res) {
                            console.log(res);
                        }
                    });
                }
            }
        },
        mounted: function () {
            this.appHeight();
            this.getNavData();
            this.getUserInfo();
        }
    });
</script>
</html>